<template>
  <div class="inner">
    <h3>天气情况</h3>
    <div class="area">
      <!-- <span>{{ temdata.area }}</span> -->
      <div class="block">
        <el-cascader
          ref="getcity"
          placeholder="襄阳市"
          size="mini"
          v-model="selectedOptions"
          :options="citydata"
          @change="getCityName"></el-cascader>
      </div>
    </div>
    <div class="weatherbox">
      <div class="iconbox">
        <div class="itemone" @click="getday(0)">
          <i :class="tureicon[0].icon" 
          :style="{color:tureicon[0].color}"></i><br>
          <span>今日：{{ turedata[0].type }}</span>
        </div>
        <div class="itemone" @click="getday(1)">
          <i :class="tureicon[1].icon"
          :style="{color:tureicon[1].color}"></i><br>
          <span>明日：{{ turedata[1].type }}</span>
        </div>
        <div class="itemone" @click="getday(2)">
          <i :class="tureicon[2].icon"
          :style="{color:tureicon[2].color}"></i><br>
          <span>后日：{{ turedata[2].type }}</span>
        </div> 
      </div>
      
      
      <div class="temperature">
        <div class="itemtwo">
          <span>● 环境温度：{{ temdata }}℃</span>
        </div>
        <div class="itemtwo">
          <span>● 环境湿度：{{ humidity }}%RH</span>
        </div>
      </div>
      <div class="news">
        <div class="itemtwo">
          <span>● 风力：{{ winddata.power }}</span>
        </div>
        <div class="itemtwo">
          <span>● 风向：{{ winddata.direction }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { provinceAndCityData } from 'element-china-area-data'
import { mapState } from 'vuex'

export default {
  data(){
    return{
      weatherdata:[
        {
          id:1,
          icon:"el-icon-sunny",
          word:"晴",
          color:"rgba(255, 115, 0, 0.986)"
        },
        {
          id:2,
          icon:"el-icon-cloudy-and-sunny",
          word:"多云",
          color:"rgba(203, 209, 212, 0.986)"
        },
        {
          id:3,
          icon:"el-icon-cloudy",
          word:"阴",
          color:"rgba(101, 105, 107, 0.986)"
        },
        {
          id:4,
          icon:"el-icon-light-rain",
          word:"小雨",
          color:"rgba(55, 175, 235, 0.986)"
        },
        {
          id:5,
          icon:"el-icon-heavy-rain",
          word:"大雨",
          color:"rgba(7, 120, 177, 0.986)"
        },
        {
          id:6,
          icon:"el-icon-heavy-rain",
          word:"中雨",
          color:"rgba(7, 120, 177, 0.986)"
        },
        {
          id:7,
          icon:"el-icon-light-rain",
          word:"小雪",
          color:"rgba(55, 175, 235, 0.986)"
        },
        {
          id:8,
          icon:"el-icon-light-rain",
          word:"中雪",
          color:"rgba(55, 175, 235, 0.986)"
        },
        {
          id:9,
          icon:"el-icon-light-rain",
          word:"大雪",
          color:"rgba(55, 175, 235, 0.986)"
        },
      ],
      winddata:{
        power:0,
        direction:0,
      },
      turedata:[
        // 很捞的方法，并未解决报错
        {
          type:""
        },
        {
          type:""
        },
        {
          type:""
        }
      ],
      tureicon:[
        {
          icon:"",
          color:"",
        },
        {
          icon:"",
          color:"",
        },
        {
          icon:"",
          color:"",
        }
      ],
      news:"",
      citydata:provinceAndCityData,
      selectedOptions: [],
      city:"襄阳市"
    }
  },
  computed:{
    ...mapState([
      'humidity',
      'temdata'
    ])
  },
  methods:{
    getTianQi(city){
      var that = this
      axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + city)
      .then(function(res){
        // console.log("全部数据", res.data.data);
        // console.log("天气",res.data.data.forecast);
        that.turedata = res.data.data.forecast;
        that.news = res.data.data.ganmao
        // console.log("提醒",that.news);
        // 匹配天气图标
        for (var i = 0; i < 3;i++){
          for(var j = 0;j < 6;j++){
            if ( that.turedata[i].type == that.weatherdata[j].word ){
              that.tureicon[i].icon = that.weatherdata[j].icon
              that.tureicon[i].color = that.weatherdata[j].color
            }
          }   
        }
        // 今日风力
        var str3= that.turedata[0].fengli
        var str4= that.turedata[0].fengxiang

        that.winddata.power = str3.substring(9,11)
        that.winddata.direction = str4
      })
    },
    getday(i){
        var str3= this.turedata[i].fengli
        var str4= this.turedata[i].fengxiang
        this.winddata.power = str3.substring(9,11)
        this.winddata.direction = str4
    },
    // 地区选择器测试
    getCityName(){
      var name = this.$refs['getcity'].getCheckedNodes()
      // console.log('选择的城市',name[0].data.label);
      this.city = name[0].data.label
      this.getTianQi(this.city)
    }
  },
  created(){
    this.getTianQi(this.city)
  } 
}
</script>

<style>
@import url('../style/weather.css');
</style>